<template>
  <a-modal
    :width='1400'
    :visible='visible'
    :confirm-loading='loading'
    :title="isUpdate ? '修改' : '新建'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible='updateVisible'
  >
  <div class="ele-body ele-body-card">
    <a-card
      :bordered="true"
      :body-style="{padding: '5px'}">
      <a-form
        ref="form"
        :model="form"
        :rules="rules"
        :label-col="{ md: { span: 11 }, sm: { span: 24 } }"
        :wrapper-col="{ md: { span: 13 }, sm: { span: 24 } }"
      >
        <a-divider  orientation="left">选择设备</a-divider>
        <a-row :gutter="8">
          <a-col :md="4" :sm="24" :xs="24"/>
          <a-col :md="10" :sm="24" :xs="24">
            <a-radio-group :options="plainOptions" @change="onChange" />
          </a-col>
          <a-col :md="10" :sm="24" :xs="24"/>
        </a-row>
      </a-form>
    </a-card>
  </div>
  </a-modal>
</template>

<script>
import { DeviceRecordApi } from '@/api/property/DeviceRecordApi';
export default {
  name: 'DeviceDrinkheartingFirmwareConfigTemplateSyncsetting',
  components: {

  },
  emits: ['done', 'update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    data: Object
  },
  async created() {
    this.form = this.data;
    let params = {
      "templateCode" : "scraper"
    };
    let that  = this;
    let devicelistResult = await DeviceRecordApi.list(params);
    if (devicelistResult && devicelistResult.data && devicelistResult.data.length > 0) {
      devicelistResult.data.forEach(function(item, index) {
        let itemdata = {
          label:  "[牧场]"+ (item.ranchName ? item.ranchName : "未设置") + "——[牛舍]" + (item.oxtallName ? item.oxtallName : '未设置') + '——[设备id]' + item.recordId,
          value: item.recordId,
          sort : item.orgId + "-"  + item.oxtId
        };
        that.plainOptions.push(itemdata);
        that.plainOptions.sort((a, b) => a.sort.localeCompare(b.sort));
      });
    }
  },
  data() {
    return {
      form : {},
      rules: {

      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      plainOptions : [],
    };
  },
  methods: {
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    onChange(e) {
      console.log('radio1 checked', e.target.value);
      // 关闭弹框，通过控制visible的值，传递给父组件
      this.updateVisible(false);
      // 触发父组件done事件
      this.$emit('done', e.target.value);
    }
  }
};
</script>
<style scoped>
/** 用户卡片 */
.workplace-user-card .ele-cell-content {
  overflow: hidden;
}

.workplace-user-card h4 {
  margin-bottom: 6px;
}
.regionclass /deep/ .ant-col-md-11 {
  max-width : 30% !important;
}
.regionclass /deep/ .ant-col-md-13 {
  max-width: 70% !important;
}
</style>
